<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            width: 300px;
            height: 300px;
            background: red;
        }
        .center{
            width: 200px;
            height: 200px;
            background: blue;
        }
        .inner{
            width: 100px;
            height: 100px;
            background: yellow;
        }


    </style>
</head>
<body>
    <div class="outer">
        <div class="center">
            <div class="inner">

            </div>
        </div>
    </div>
    <script>
        var outerEle = document.querySelector(".outer");
        var centerEle = document.querySelector(".center");
        var innerEle = document.querySelector(".inner");


        // 事件冒泡机制 ，从内向外依次触发事件执行；
        // 冒泡和捕获 通过 addEventListener 的第三个参数控制的：默认值是false（冒泡） true（捕获）

        // window.addEventListener("click",function(){
        //     console.log("window");
        // })

        // document.addEventListener("click",function(){
        //     console.log("document");
        // })
        // document.documentElement.addEventListener("click",function(){
        //     console.log("html");
        // })
        // document.body.addEventListener("click",function(){
        //     console.log("body")
        // })
        // outerEle.addEventListener("click",function(){
        //     console.log("outer");
        // })
        // centerEle.addEventListener("click",function(){
        //     console.log("center");
        // })
        // innerEle.addEventListener("click",function(e){
        //     var e = e || window.event;
        //     // 触发的目标元素
        //    console.log( e.target);
        //     console.log("inner");
        // })

       


        // 事件捕获
        // window.addEventListener("click",function(){
        //     console.log("window");
        // },true)

        // document.addEventListener("click",function(){
        //     console.log("document");
        // },true)
        // document.documentElement.addEventListener("click",function(){
        //     console.log("html");
        // },true)
        // document.body.addEventListener("click",function(){
        //     console.log("body")
        // },true)
        // outerEle.addEventListener("click",function(){
        //     console.log("outer");
        // },true)
        // centerEle.addEventListener("click",function(){
        //     console.log("center");
        // },true)
        // innerEle.addEventListener("click",function(e){
        //     // 触发的目标元素
        //    console.log( e.target);
        //     console.log("inner");
        // },true)


    </script>
</body>
</html>